<template>
  <div>
    <!-- 顶部导航 -->
    <div class="top">
      <van-nav-bar
        left-arrow
        :fixed="false"
        @click-left="onClickLeft"
        @click-right="onClickRight"
        class="zufang1"
      >
        <template #right>
          <span class="zufang zufang-ditudingwei"></span>
        </template>
        <template #title>
          <div class="bbb">
            <div
              style="
                background-color: #fff;
                border: none;
                display: flex;

                height: 35px;
                align-items: center;
                padding-left: 10px;
                font-size: 18px;
                color: #555;
                width: 100%;
              "
            >
              <span @click="city" style="font-size: 15px">{{ shanghai }}</span>
              <span
                style="
                  font-size: 23px;
                  color: #555;
                  margin-left: -7px;
                  margin-top: 3px;
                "
                class="zufang zufang-shaixuan-xiajiantou"
              >
              </span>
              <van-search placeholder="请输入搜索关键词" />
            </div>
          </div>
        </template>
      </van-nav-bar>
      <!-- 顶部二级导航 -->
      <van-sticky>
        <div class="top">
          <van-dropdown-menu class="navtopleft">
            <van-dropdown-item title="区域" ref="item1">
              <van-picker
                show-toolbar
                :columns="columns44"
                @confirm="onConfirm44"
                @cancel="onCancel44"
                @change="onChange44"
              />
            </van-dropdown-item>

            <van-dropdown-item title="方式" ref="item2">
              <van-picker
                :columns="columns1"
                show-toolbar
                @confirm="onConfirmchange1"
                @cancel="onCancel1"
              ></van-picker>
            </van-dropdown-item>

            <van-dropdown-item title="租金" ref="item3">
              <van-picker
                show-toolbar
                :columns="columns2"
                @confirm="onConfirmchange"
                @cancel="onCancel"
              ></van-picker>
            </van-dropdown-item>
          </van-dropdown-menu>

          <div class="navtopright">
            <van-cell @click="showPopup"
              >筛选<span class="zufang zufang-shaixuan-xiajiantou"></span
            ></van-cell>
            <van-popup
              v-model="show"
              position="right"
              :style="{ height: '100%' }"
            >
              <info
                :floor="floor"
                :oriented="oriented"
                :roomType="roomType"
                :character="character"
              ></info>
            </van-popup>
          </div>
        </div>
      </van-sticky>
    </div>
    <!-- 商品卡片 -->
    <div class="maintop">
      <van-list
        v-model="loading"
        @load="onLoad"
        :finished="finished"
        :error.sync="error"
        error-text="请求失败，点击重新加载"
        finished-text="没有更多了"
        :immediate-check="false"
      >
        <cardson
          v-for="(itms, index) in userInfo"
          :key="index"
          :user-info="itms"
        ></cardson>
      </van-list>
    </div>
  </div>
</template>

<script>
import info from './compotens/infoxiang.vue'
import { housesApi, condiSeatchApi } from '@/api'
import cardson from './compotens/card.vue'
export default {
  name: 'seatch',
  components: { cardson, info },
  data() {
    return {
      loading: false,
      show: false,
      columns1: ['不限', '整租', '合租'],
      columns2: [],
      userInfo: [],
      //热门代替定位 默认上海
      timo: 1,
      finished: false,
      error: false,
      price: [],
      //根据价格查询
      rentType: '',
      //按照方式查找
      rentType2: '',
      rentType222: '',
      columns22: '',
      //按照需要排列
      subwaywuxian: [],
      shubyditie: [],
      columns44: [
        {
          values: [],
          defaultIndex: 0
        },
        // 第二列
        {
          values: [],
          defaultIndex: 0
        },
        {
          values: [],
          defaultIndex: 0
        }
      ],
      ditie: '',
      quyu: '',
      //房屋亮点
      character: '',
      //户型
      roomType: '',
      //朝向
      oriented: '',
      //楼层
      floor: ''
    }
  },
  async created() {
    await this.housingundet()
    await this.housesinfo()
  },
  computed: {
    //点击的价格处理
    paiceIs() {
      if (this.rentType) {
        return this.columns22.find((itms) => itms.label === this.rentType)
      }
      return ''
    },
    //跳转过来进行的搜索
    shanghai() {
      if (this.$route.query.label) {
        return this.$route.query.label
      } else {
        return '上海'
      }
    },
    remen() {
      if (this.$route.query.value) {
        return this.$route.query.value
      } else {
        return 'AREA|dbf46d32-7e76-1196'
      }
    }
  },
  methods: {
    onConfirm44(value, index) {
      if (value[0] === '地铁') {
        this.ditie = value.filter((itms) => itms)
      } else {
        this.quyu = value.filter((itms) => itms)
      }
      this.timo = 0
      this.onLoad()
      this.$refs.item1.toggle()
    },
    //改变选项触发
    onChange44(picker, value, index) {
      // this.$toast(`当前值：${value}, 当前索引：${index}`)
      const aa = this.subwaywuxian.children
      const bb = this.shubyditie.children
      this.columns44[1].values = []
      if (value[0] === '区域') {
        aa.forEach((itms) => this.columns44[1].values.push(itms.label))
      } else if (value[0] === '地铁') {
        bb.forEach((itms) => this.columns44[1].values.push(itms.label))
      }
      const rsc = aa.find((itms) => itms.label === value[1])
      const rsc1 = bb.find((itms) => itms.label === value[1])
      this.columns44[2].values = []
      if (value[0] === '区域' && value[1] !== '不限') {
        if (rsc) {
          rsc.children.forEach((itms) =>
            this.columns44[2].values.push(itms.label)
          )
        }
      } else if (value[0] === '地铁' && value[1] !== '不限') {
        if (rsc1) {
          rsc1.children.forEach((itms) =>
            this.columns44[2].values.push(itms.label)
          )
        }
      }
    },
    //点击取消触发
    onCancel44() {
      this.$refs.item1.toggle()
    },
    onClickLeft() {
      this.$router.push({ path: '/home ' })
    },
    onClickRight() {
      this.$router.push({ path: '/map' })
    },
    showPopup() {
      this.show = true
    },
    //确认改变租金触发
    onConfirmchange(value, index) {
      this.rentType = value
      this.timo = 0
      this.onLoad()
      this.$refs.item3.toggle()
    },
    //改变方式触发
    onConfirmchange1(value) {
      this.$refs.item2.toggle()
      this.timo = 0
      const aa = this.rentType2.filter((itms) => itms.label === value)
      this.rentType222 = aa[0].value
      this.onLoad()
    },
    //取消改变方式
    onCancel1() {
      this.$refs.item2.toggle()
    },
    //取消点击弹窗
    onCancel() {
      this.$refs.item3.toggle()
    },
    //控制弹窗
    onConfirm(val) {
      if (val === 1) this.$refs.item1.toggle()
      if (val === 2) {
        this.$refs.item2.toggle()
      }
      if (val === 3) this.$refs.item3.toggle()
    },
    city() {
      this.$router.push({
        path: '/city',
        query: {
          id: 0
        }
      })
    },
    //调用房屋数据
    async housesinfo() {
      //模拟北京的地位数据  暂无  直接data取值
      const params = {
        cityId: this.remen,
        start: this.timo,
        end: this.timo + 9
      }
      this.timo = params.end
      //获取房屋列表
      const aa = await housesApi(params)
      this.userInfo = aa.data.body.list
      this.$toast.success('获取成功')
    },

    async housingundet() {
      this.$toast.loading({
        message: '加载中...',
        forbidClick: true,
        duration: 0
      })
      //获取房屋查询条件
      const { data } = await condiSeatchApi(this.remen)
      //按照价格查询
      this.columns2 = data.body.price.map((itms) => itms.label)
      this.columns22 = data.body.price
      //按照方式查找
      this.rentType2 = data.body.rentType
      //区域查找
      this.subwaywuxian = data.body.area
      this.shubyditie = data.body.subway
      //房屋亮点
      this.character = data.body.characteristic
      //户型
      this.roomType = data.body.roomType
      //朝向
      this.oriented = data.body.oriented
      //楼层
      this.floor = data.body.floor
      //添加地域地铁
      if (this.columns44[0].values.length === 0) {
        this.columns44[0].values.push(
          this.subwaywuxian.label,
          this.shubyditie.label
        )
      }
      const aa = this.subwaywuxian.children
      for (let i = 0; i < aa.length; i++) {
        this.columns44[1].values.push(aa[i].label)
      }
    },
    //触发下拉函数
    async onLoad() {
      try {
        this.$toast.loading({
          message: '加载中...',
          forbidClick: true,
          duration: 0
        })
        const params = {
          cityId: this.remen,
          start: this.timo + 1,
          end: this.timo + 10,
          //整租为true , 合租为false ,不限为null
          rentType: this.rentType222 || '',
          price: this.paiceIs.value || '',
          //地区
          area: this.quyu || '',
          //地铁
          subway: this.ditie || ''
        }
        this.timo = params.end
        const aa = await housesApi(params)
        if (
          (this.rentType || this.rentType2 || this.ditie || this.quyu) &&
          this.timo === 10
        ) {
          document.body.scrollTop = 0
          document.documentElement.scrollTop = 0
          this.userInfo = aa.data.body.list
        } else {
          this.userInfo.push(...aa.data.body.list)
        }
        this.$toast.success('获取成功')
        //如果没有数据将,将finished设置为true,并且提示没有数据了
        if (aa.data.null) {
          this.finished = true
        }
      } catch (error) {
        this.error = true
        this.$toast.fail('失败')
      } finally {
        //无论成功与否都会将loading改为false
        this.loading = false
      }
    }
  }
}
</script>

<style scoped lang="less">
.top {
  :deep(.van-picker__toolbar) {
    bottom: 0;
    position: absolute;
    color: #fff;
    background-color: #07c160;
    z-index: 1000;
    width: 100%;
    .van-picker__cancel {
      background-color: #fff;
    }
    .van-picker__confirm {
      width: 80%;
    }
    // top: 50%;
    // left: 50%;
    // width: 100%;
    // height: 100%;
    // background-color: #000;
    // border: inherit;
    // border-color: #000;
    // border-radius: inherit;
    // -webkit-transform: translate(-50%,-50%);
    // transform: translate(-50%,-50%);
    // opacity: 0;
  }
  :deep(.van-grid) {
    margin-left: 44px;
    .huxing {
      font-size: 19px;
    }
  }
  .button1 {
    width: 480px;
  }
  .button2 {
    width: 270px;
  }
  .navtopleft {
    width: 75%;
    float: left;
    font-size: 30px;
    position: relative;
  }
  .navtopright {
    background-color: red;
    width: 25%;
    height: 96px;
    float: right;
    :deep(.van-popup--right) {
      width: 70%;
    }
    .navtopright:hover {
      color: #f13b50;
    }

    box-shadow: 0 0.05333rem 0.32rem rgb(100 101 102 / 12%);
    .zufang {
      color: #e3e5e6;
      font-size: 45px;
      position: absolute;
    }
    :deep(.van-cell__value--alone) {
      text-align: center;
    }
    :deep(.van-cell__value--alone:hover) {
      color: #f13b50;
      position: relative;
    }
    :deep(.van-cell) {
      align-items: center;
      height: 100%;
      line-height: 100%;
      font-size: 0.4rem;
    }
  }
}
:deep(.van-search__content) {
  background-color: #fff;
}
:deep(.van-nav-bar__title) {
  border-radius: 5px 5px 5px 5px;
}
.inputsea {
  border: none;
  font-size: 37px;
  width: 4rem;
  margin-right: 5px;

  color: #777;
  height: 100%;
}
.inputsea::placeholder {
  font-size: 26px;
}
:deep(.van-search) {
  margin-left: -18px;
  padding-left: 0;
  padding-right: 0;
}
:deep(.van-search) {
  padding-right: -22px;
}
:deep(.van-nav-bar__content) {
  height: 100px;
}
.zufang1 {
  background-color: #21b97a;
  .zufang-ditudingwei {
    font-size: 45px;
    color: #fff;
  }
  :deep(.van-icon-arrow-left) {
    color: #fff;
  }
}
:deep(.van-nav-bar, .van-nav-bar__content) {
  height: 100px;
}
:deep(.van-dropdown-menu__bar--opened) {
  z-index: 0;
}
.main {
  :deep(.van-card) {
    width: 100%;
  }
}
.mainfoor {
  :deep(.van-grid-item__content) {
    width: 135px;
  }
}
.maintop {
  padding-top: 97px;
  padding-bottom: 100px;
}
// 临时放入
</style>
